<!-- 裁剪图片工具-->
<template>
  <div class="upgrade-box">
    <el-dialog title="裁剪图片" 
     v-model="dialogVisible11"
     :width="800"
    @closed="close_popup">
      <div class="prompt-content">
        <div class="inner-box">
          <!-- <div class="tip">提示：按微信公众号封面图2:35:1或1:1比例选择保留区域后，裁剪上传。</div>
          <div class="group-btn">
            <div
              class="item"
              :class="option.fixedNumber[0] === 2.35 ? 'item active' : 'item'"
              @click="cropSize(2.35, 1)"
              >2:35:1</div
            >
            <div
              class="item"
              :class="option.fixedNumber[0] === 1 ? 'item active' : 'item'"
              @click="cropSize(1, 1)"
              >1:1</div
            >
          </div> -->
          <!-- 裁剪区域 -->
          <div
            class="cropper-box"
            :style="{ width: `${imgObj.width}px`, height: `${imgObj.height}px` }"
          >
            <VueCropper
              ref="cropperRef"
              :img="option.img"
              :output-size="option.outputSize"
              :output-type="option.outputType"
              :can-scale="option.canScale"
              :auto-crop="option.autoCrop"
              :full="option.full == '0'"
              :auto-crop-width="option.autoCropWidth"
              :auto-crop-height="option.autoCropHeight"
              :can-move-box="option.canMoveBox"
              :can-move="option.canMove"
              :center-box="option.centerBox"
              :info="option.info"
              :fixed-box="option.fixedBox"
            />
            <!-- :fixed="option.fixed"
            :fixed-number="option.fixedNumber" -->
          </div>
        </div>
        <div class="button-group">
          <el-button  class="dialog-button" @click="close_popup">
            <div class="dialog-button-div">取消</div>
          </el-button>
          <el-button type="primary" class="dialog-button button-confirm" @click="cropperClick">
            <div class="dialog-button-div">保存/上传</div>
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script  setup>
  import { onMounted, ref, watch } from 'vue';
  import { VueCropper } from 'vue-cropper';
  import 'vue-cropper/dist/index.css'; // vue3才需要引入样式，vue2不要

 
  const props = defineProps({
    coverFile: {
      type: String,
      require: '',
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  });

  const dialogVisible11 = ref(false)

	watch(props, (val) => {
    console.log(val.coverFile)
    if(val.coverFile) {
      dialogVisible11.value = true;
      option.value.img = val.coverFile;
    } else {
      dialogVisible11.value = false;
      // option.value.img = '';
    }
	}, {immediate: true})

  // 裁剪组件Ref
  const cropperRef = ref({});
 
  // 裁剪组件需要使用到的参数
  // interface Options {
  //   img: string;
  //   outputSize: number; // 裁剪生成图片质量
  //   outputType: string; // 裁剪生成图片格式
  //   canScale: boolean; // 图片是否允许滚轮播放
  //   autoCrop: boolean; // 是否默认生成截图框 false
  //   info: boolean; // 是否展示截图框信息
  //   autoCropWidth: number; // 生成截图框的宽度
  //   autoCropHeight: number; // 生成截图框的高度
  //   canMoveBox: boolean; // 截图框是否可以拖动
  //   enlarge: number;
  //   fixedBox: boolean; // 固定截图框的大小
  //   // fixed: boolean; // 是否开启截图框宽高固定比例
  //   // fixedNumber: number[]; // 截图框的宽高比例 默认2.35, 1:1,
  //   canMove: boolean; // 上传图片是否可拖动
  //   centerBox: boolean; // 截图框限制在图片里面
  //   accept: string; // 上传允许的格式
  //   infoTrue: boolean;
  //   original: boolean;
  //   full: boolean | string;
  // }
 
  const option = ref({
    img: String(props.coverFile), // 裁剪图片地址
    outputSize: 1, // 裁剪生成图片质量
    outputType: 'jpeg', // 裁剪生成图片格式
    canScale: true, // 图片是否允许滚轮播放
    autoCrop: true, // 是否默认生成截图框 false
    info: true, // 是否展示截图框信息
    autoCropWidth: 235, // 生成截图框的宽度
    autoCropHeight: 100, // 生成截图框的高度
    enlarge: 1, // 采集后放大倍数
    full: '0', // 是否开启原尺寸裁剪 0 原尺寸 1当前尺寸
    infoTrue: true,
    original: true,
    canMoveBox: true, // 截图框是否可以拖动
    fixedBox: false, // 固定截图框的大小
    // fixed: true, // 是否开启截图框宽高固定比例
    // fixedNumber: [1, 1], // 截图框的宽高比例 默认2.35, 1:1,
    canMove: true, // 上传图片是否可拖动
    centerBox: true, // 截图框限制在图片里面
    accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
  });
 
  // const handleSelectImg = (imgItem) => {
  //   option.value.img = String(imgItem);
  // };
 
  // 外框大小
  const imgObj = ref({
    width: 780,
    height: 500,
  });

  const dataURLtoFile = (dataurl, filename)=> { 
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}
 
//调用
 
  // 修改截图框尺寸，宽，高
  // const cropSize = (w: number, h: number) => {
  //   option.value.fixedNumber = [w, h];
  //   cropperRef.value.refresh();
  // };
 
  // 裁剪后
  const cropperClick = () => {
    cropperRef.value.getCropData((base64Data) => {
      const file = dataURLtoFile(base64Data, 'cjpbg');
      emit('cropperClick', file);
    }, 'image/png');
  };
 
  const emit = defineEmits(['onClose', 'cropperClick']);
  const close_popup = () => {
    emit('onClose');
  };
 
  // onMounted(() => {
  //   handleSelectImg(String(props.coverFile));
  // });

</script>
 
<style lang="scss" scoped>
// ::v-deep
  .upgrade-box {
    .inner-box {
      .tip {
        font-size: 30px;
        div-align: left;
      }
      .group-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 20px 0px;
        .item {
          flex: 1;
          display: inline-flex;
          background: rgba(0, 0, 0, 0.03);
          border-radius: 6px 6px 0 0;
          div-align: center;
          justify-content: center;
          align-items: center;
          padding: 0 30px;
          height: 80px;
          white-space: nowrap;
          font-size: 34px;
          cursor: pointer;
          color: #353535;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #eee;
            height: 100%;
            display: block;
          }
          &:first-child {
            border-radius: 6px 0 0 6px;
            &:after {
              display: none;
            }
          }
          &.active {
            background: rgba(0,0,0,.5);
            color: #fff;
            border-radius: 6px;
          }
        }
      }
      .cropper-box {
        background: #eee;
        overflow: hidden;
      }
    }
  }
  .button-group {
    margin-top: 20px;
  }
</style>